<template>
	<view class="pages">
		<!-- <view class="title">
			选择城市
		</view> -->
		<!-- <view class="search">
			<image src="/static/home/icon_search.png" mode="widthFix"></image>
			<input type="text" placeholder="请输入关键词" @blur="search" 
			v-model="cityvalue">
		</view> -->
		<view class="title">
			当前城市
		</view>
		<view class="citylist">
			<view>{{city.city}}</view> 
		</view>
		<view class="" v-for="(item,i) in citylist" :key="i">
			<view  class="title">
				{{item.name}}
			</view>
			<view class="citylist"  >
				<view v-for="(it,index) in item.children" :key="index" @click="chose(it)">
					{{it.name}}
				</view> 
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import {getAreaTreeAPI} from "@/api/api.js"

import {mapState,mapActions,mapMutations } from "vuex";
	export default {
		data() {
			return {
				citylist:[],
				cityvalue:"",
				
			}
		},
		created() {
			this.getData()
		},
		computed:{
			...mapState("select", ['city'])
		},
		methods: {
			...mapMutations("select", ['SET_CITY']),
			getData(){
				getAreaTreeAPI().then(res=>{
					 this.citylist=res
					 
					 
				})
			},
			chose(item){
				var data={
					 
					cityId:item.id,
					city:item.name
				}
				this.SET_CITY(data)
				uni.navigateBack()
			},
			search(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.pages{
	padding: 30rpx;
}
.title{
	font-size: 34rpx;
	font-weight: bold;
	 
	margin: 20rpx 0;
}
.search{
	border-radius: 30rpx; 
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	background-color: #F5F6F9;
	border-radius: 10rpx;
	height: 80rpx;
	image{
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}
	input{
		line-height: 60rpx;
		text-indent: 20rpx;
		flex: 1;
	}
}

.citylist{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	view{
		border-radius: 10rpx;
		padding: 12rpx 30rpx;
		color: #1D2541;
		font-size: 28rpx;
		background-color: #F7F8FA;
		margin:10rpx 20rpx 10rpx 0;
	}
}

</style>
